<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
    <title>图书详情</title>
   	<link href="/static/h5/css/mui.min.css" rel="stylesheet"/>
    <link href="/static/h5/css/icons-extra.css" rel="stylesheet"/>
    <link href="/static/h5/css/import.css" rel="stylesheet"/>

    
    <script src="https://unpkg.com/vue"></script>
	<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
</head>
<body>
	
	<!-- <header class="mui-bar mui-bar-nav sy-bar-nav">
		<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
		<h1 class="mui-title">图书详情</h1>
	</header>
	 -->
	
	
	<div class="mui-content">
		
		<div class="sy-imgBig-list">
			<div class="v">
				<div class="v-thumb">
					<div class="v-pic-default"><img src="images/28B35.png"></div>
					<div class="v-pic-real" style="background-image:url(images/muwu.jpg)"></div>
				</div>
			</div>
			<div class="mui-text-center" style="padding: 10px 0;">《乱世佳人》</div>
			<div style="padding: 0 15px; height: 40px; line-height: 20px; overflow: hidden;" class="c-666666">本书被推为21世纪现代女性必读的“人生四书”之一。 乱世佳人郝思嘉将告诉你如何与残酷的现实抗争......</div>
		</div>
		
		<div class="mui-table-view m-t10">
			<div class="mui-icon-header"><i class="iconTB-radius r100"></i>图书介绍</div>
			<div class="mui-card-content-inner sy-card-inner">
				<div class="cinnerBody" id="cinnerBody">
					      美国南北战争前夕，南方农场塔拉庄园的千金
					斯嘉丽（费•雯丽 饰）爱上了另一个农场主的儿子
					艾希礼（李斯利•霍华德 饰），遭到了拒绝，为了
					报复，她嫁给了自己不爱的男人，艾希礼妻子梅兰
					（奥莉薇•黛•哈佛兰 饰） 的弟弟查尔斯。 战争期
					间，斯嘉丽成为寡妇，失去母亲，挑起生活的......					
				</div>
				<div class="cinnerMore"><span>展开</span><a class="mui-icon mui-icon-arrowdown"></a></div>
			</div>
		</div>
		
		<div class="mui-table-view m-t10 sy-shuping-view">
			<div class="mui-icon-header"><i class="iconTB-radius r100"></i>书评</div>
			<div class="mui-table brB mui-text-center" style="padding: 5px 10px;">
				<div class="mui-col-xs-3 mui-pull-left">
					<div class="c-3ac9af">125452</div>
					<p>已读</p>
				</div>
				<div class="mui-col-xs-3 mui-pull-left">
					<div class="c-3ac9af">452</div>
					<p>书评</p>
				</div>
				<div class="mui-col-xs-6 mui-pull-right mui-text-right"><span class="news-icon starLevel"><span class="news-icon LevelBg" style="width: 80%;"></span></span></div>
			</div>
			<ul class="mui-table-view">
				<li class="mui-table-view-cell">
					<a href="javascript:;" class="mui-ithImg">
						<div class="mui-pull-left photo-image" style="background-image: url(images/muwu.jpg);"></div>
						<div class="mui-media-body">
							<div class="mui-table">
								<div class="mui-table-cell mui-ellipsis">李司棋</div>
								<p class="mui-text-right">2017-05-12</p>
							</div>
							<p>评分<span class="news-icon starLevel"><span class="news-icon LevelBg" style="width: 80%;"></span></span></p>
						</div>
						<div class='mui-row mui-table'>
							这本书真的很好! 
						</div>
					</a>
				</li>
				<li class="mui-table-view-cell">
					<a href="javascript:;" class="mui-ithImg">
						<div class="mui-pull-left photo-image" style="background-image: url(images/muwu.jpg);"></div>
						<div class="mui-media-body">
							<div class="mui-table">
								<div class="mui-table-cell mui-ellipsis">李司棋</div>
								<p class="mui-text-right">2017-05-12</p>
							</div>
							<p>评分<span class="news-icon starLevel"><span class="news-icon LevelBg" style="width: 80%;"></span></span></p>
						</div>
						<div class='mui-row mui-table'>
							这本书真的很好!
						</div>
					</a>
				</li>
			</ul>
		</div>
		
		<ul class="btn-tipList mui-col-lay">
			<li class="muiCol"><span>想读</span></li>
			<li class="muiCol"><span>在读</span></li>
			<li class="muiCol"><span>读过</span></li>
		</ul>
		
	</div>
	
	<div class="sy-pup-main" id="pupMain" style="display: none;">
		<div class="mui-bar-tab">
			<a class="mui-tab-item" href="#">
				<span>
					<i class="sy-icon sy-icon120-xiguan"></i>习惯
				</span>
			</a>
			<a class="mui-tab-item" href="#">
				<span>
					<i class="sy-icon sy-icon120-zuoye"></i>作业
				</span>
			</a>
		</div>
	</div>
	
	<script src="js/import.js" type="text/javascript"></script>
	<script>
		(function($, doc) {
			var cinnerBody = document.getElementById("cinnerBody");
			$(doc).on('tap','.cinnerMore', function(){
				if(cinnerBody.className == 'cinnerBody cinnerBody-hover'){
					this.firstChild.innerHTML = '展开';
					this.lastChild.className = 'mui-icon mui-icon-arrowdown';
					cinnerBody.className = 'cinnerBody';
				}else{
					this.firstChild.innerHTML = '收起';
					this.lastChild.className = 'mui-icon mui-icon-arrowup';
					cinnerBody.className = 'cinnerBody cinnerBody-hover';
				}
			})
		})(mui, document);
	</script>
	
</body>
</html>